<template>
  <div class="page page-train-detail has-headbar">
    <head-bar :title="$route.meta.title" :prevRoute="{name: 'train-home'}" />
    <h2 class="title">{{title}}</h2>
    <div class="banner" :style="{backgroundImage: `url(${banner})`}"></div>
    <div class="info-box">
      <div class="address"><span class="icon icon-address"></span>{{address}}</div>
      <div class="time"><span class="icon icon-time"></span>{{time}}</div>
      <div class="rule"><span class="icon icon-rule"></span><span v-if="total">人数{{total}}人</span> <van-tag v-if="isPublic === 0">¥{{price}}</van-tag></div>
       <van-cell-group class="form-box">
        <van-field
          v-model="name"
          label="联系人"
          name="name"
          placeholder="请输入联系人姓名"
          v-validate="'required'"
        />
        <van-field
          v-model="phone"
          type="phone"
          name="phone"
          label="电话"
          placeholder="请输入联系人电话"
          maxlength="11"
          v-validate="'required|phone'"
        />
        <van-field
          v-model="num"
          type="number"
          name="number"
          label="人数"
          data-vv-as="人数"
          placeholder="请输入报名人数"
          v-validate="{required: true, regex: /^[1-9]\d*$/}"
        />
       </van-cell-group>
    </div>
    <van-button size="large" class="submit-btn" @click="signEvent" :disabled="disabled" :loading="loading">立即报名</van-button>
    <div class="html-content" v-html="content"></div>
    <!-- <van-dialog
      v-model="show"
      show-cancel-button
      :before-close="beforeClose"
    >
      <van-field
        v-model="name"
        label="联系人"
        name="name"
        placeholder="请输入联系人姓名"
        v-validate="'required'"
      />
      <van-field
        v-model="phone"
        type="phone"
        name="phone"
        label="电话"
        placeholder="请输入联系人电话"
        maxlength="11"
        v-validate="'required|phone'"
      />
      <van-field
        v-model="num"
        type="number"
        name="number"
        label="人数"
        data-vv-as="人数"
        placeholder="请输入报名人数"
        v-validate="{required: true, regex: /^[1-9]\d*$/}"
      />
    </van-dialog> -->
  </div>
</template>

<script>
import { API_TRAIN_DETAIL, API_TRAIN_BOOK } from '@/service/train'
import { certificateMixin, wxjsdkMixin } from '@/components/mixins'
import { getWechatLink } from '@/libs/utils'
export default {
  name: 'train-detail',
  mixins: [certificateMixin, wxjsdkMixin],
  data () {
    return {
      title: '',
      isPublic: 0,
      banner: '',
      address: '',
      time: '',
      price: 0,
      total: 0,
      content: '',
      disabled: false,
      loading: false,
      // show: false,
      name: '',
      phone: '',
      num: 1
    }
  },
  computed: {
    trainId () {
      return this.$route.params.id
    }
  },
  mounted () {
    this.wechatShowMenu()
    this.requestData().then(() => {
      let shareInfo = {
        title: this.title, // 分享标题
        desc: '',
        link: getWechatLink(window.location.hash), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: this.banner, // 分享图标
        success: function () {
          console.log('分享', getWechatLink(window.location.hash))
        }
      }
      this.wechatShare(shareInfo)
    })
  },
  methods: {
    signEvent () {
      // if (!this.$store.state.account.accessToken) {
      //   this.$router.push({ name: 'login' })
      //   return
      // }
      this.certificateCheck().then(() => {
        this.$validator.validate().then(result => {
          if (result) {
            this.submitData()
          } else {
            this.$toast(this.errors.all()[0])
          }
        })
      })
    },
    submitData () {
      let reqData = {
        trainId: this.trainId,
        total: this.num,
        contactsPerson: this.name,
        contactsPhone: this.phone
      }
      this.disabled = true
      return API_TRAIN_BOOK(reqData).then(resData => {
        this.$toast('报名成功')
        this.$router.replace({ name: 'user-order-detail', query: { orderId: resData.info.id, type: resData.info.type } })
      }).catch(() => {
        this.disabled = false
      }).finally(() => {
        this.loading = false
      })
    },
    requestData () {
      return API_TRAIN_DETAIL(this.trainId).then((resData) => {
        let info = resData.info
        let { name, address, isPublic, trainTime, imageUrl, price, total, content } = info
        this.title = name
        this.address = address
        this.isPublic = isPublic
        this.time = trainTime
        this.banner = imageUrl
        this.price = price
        this.total = total
        this.content = content
        document.title = name
      })
    }
    // beforeClose (action, done) {
    //   if (action === 'confirm') {
    //     this.$validator.validate().then(result => {
    //       if (result) {
    //         this.submitData().then(() => {
    //           done()
    //         }).catch(() => {
    //           done(false)
    //         })
    //       } else {
    //         done(false)
    //         this.$toast(this.errors.all()[0])
    //       }
    //     })
    //   } else {
    //     done()
    //   }
    // }
  }
}
</script>

<style lang="less">
.page-train-detail {
  @iconPath: "../../assets/images/icon";
  .title {
    font-size: 34/2px;
    text-align: center;
    line-height: 24px;
    font-weight: bold;
  }
  .banner{
    width: 95%;
    height: 348/2px;
    border-radius: 5px;
    display: block;
    margin: 10px auto;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  .info-box {
    font-size: 15px;
    padding-left: 12px;
    padding-right: 12px;
    .address,.time,.rule {
      margin-top: 10px;
    }
    .icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-position: center center;
      vertical-align: middle;
      &-address {
        background-image: url('@{iconPath}/icon_location.png');
        background-size: 14px 18px;
      }
      &-time {
        background-image: url('@{iconPath}/icon_clock.png');
        background-size: 18px 18px;
      }
      &-rule {
        background-image: url('@{iconPath}/icon_person.png');
        background-size: 18px 18px;
      }
    }
  }
  .form-box {
    margin-top: 10px;
  }
  .van-tag {
    background-color: #FD7B77!important;
  }
  .submit-btn{
    height: 40px;
    line-height: 40px;
    background: #FEA54B;
    color: #fff;
    display: block;
    width: 90%;
    margin: 25px auto;
    border: none;
    border-radius: 10px;
  }
  .html-content{
    padding-left: 12px;
    padding-right: 12px;
  }
}
</style>
